<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

{yun:}include file="$lietoustyle/public.htm"{/yun}

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	
	<link rel="stylesheet" href="{yun:}$config.sy_weburl{/yun}/js/imgareaselect/imgareaselect.css?v={yun:}$config.cachecode{/yun}" type="text/css" />
	<script type="text/javascript" src="{yun:}$config.sy_weburl{/yun}/js/imgareaselect/jquery.imgareaselect.js?v={yun:}$config.cachecode{/yun}"></script>
	<script type="text/javascript" src="{yun:}$config.sy_weburl{/yun}/js/imgareaselect/ajaxfileupload.js?v={yun:}$config.cachecode{/yun}"></script>
</head>

<body>
 
	<!--header头部-->
	{yun:}include file="$lietoustyle/header.htm"{/yun}

	<!--内容部分content-->
	<div class="m_content">
		<div class="wrap">
			{yun:}include file="$lietoustyle/left.htm"{/yun}
			<div class="m_inner_youb fl">
				<div class="lt_m_tit">
					<span class="lt_m_tit_s">上传头像</span>
				</div>
				<div class="resume_box_list">
					<div class="uppic_msg">提示：有时因页面缓存问题，上传后照片不能及时更新请击刷新页面即可</div>

					<div class="uppic_left">
						
						<div class="uppic_tip">方法一：选择本地照片，上传编辑自己的头像</div>
						
						<div class="uppic_tip_bth">
							<a class="uppic_tip_bthupload" href="javascript:;">选择照片</a> 
							<input id="image" class="uppic_tip_bthfile" type="file" name="image" onchange="ajaxfile();" />
						</div>
						
						<div class="uppic_tip_gs">支持，{yun:}$config.pic_type{/yun},文件格式，最大不要超过{yun:}$config.file_maxsize{/yun}M</div>

						<div class="clear"></div>
						
						<div class="uppic_tit">
							头像预览 
							{yun:}if $row.photo_n{/yun} 
								{yun:}if $row.photo_status=='1'{/yun} 
									<font color="#f00">审核中</font>
								{yun:}else if $row.photo_status=='2'{/yun} 
									<font color="#f00">未通过</font>
								{yun:}else{/yun} 
									<font color="#f00">已审核</font> 
								{yun:}/if{/yun}
							{yun:}/if{/yun}
						</div>
						
						<div class="clear"></div>

						<div class="oppic_img_big">
							<div class="oppic_img_big_img" style="width: 120px;">
								<img src="{yun:}$bpic{/yun}" width='120' height='120' />
							</div>
							<div class="oppic_img_big_p">标准头像120x120</div>
						</div>
						
						<div class="clear"></div>
						
						<div class="uppic_flash" style="display: none;" id='uppic_flash'>
							
							<div class="uppic_big_zx">
								<img src="" style="float: left; margin-right: 10px;" id="thumbnail" />
							</div>
							
							<div style="width: 150px; float: left">
								
								<div id="preview1" class="uppic_previ1">
									<img id="preview1_img" src="" style="position: relative;" />
								</div>
							</div>
							
							<div class="uppic_pb">
								<form name="form1" id="form1">
									<input name="sizeit" id="sizeit" type="submit" value="保存头像" class="uppic_pb_bth" />
								</form>
							</div>
						</div>
					</div>
					
					<div class="uppic_right">
						<div class="uppic_right_tit">方式二：手机拍照上传</div>
						<div class="uppic_ewm">
							<img src="{yun:}url m=upload c=qrcode type=5{/yun}" alt="手机扫码拍照上传" width="130" height="130" />
						</div>
						<div class="uppic_ewm_p">扫描二维码</div>
					</div>

					<div class="clear"></div>  
				</div>
			</div>
		</div>
	</div>

	<script>
		function ajaxfile() {
			if ($("#image").val() != '') {
				layer.load('图片上传中，请稍候....', 0);
				$.ajaxFileUpload({
					url : 'index.php?c=uppic&act=ajaxfileupload', //用于文件上传的服务器端请求地址
					secureuri : false, //是否需要安全协议，一般设置为false
					fileElementId : 'image', //文件上传域的ID
					dataType : 'json', //返回值类型 一般设置为json
					success : function(data, status) { //服务器成功响应处理函数
						layer.closeAll('loading');
						if (data.s_thumb) {
							layer.msg(data.s_thumb, 2, 8);
							setTimeout(function() {
								location.href = '';
							}, 2000);
						} else {
							hideLoading(data.url);
						}
					}
				})
			}
		}

		var size1 = {
			width : 120,
			height : 120
		}
		
		$('#preview1').width(size1.width);
		$('#preview1').height(size1.height);

		function hideLoading(pic) {
			
			$("#thumbnail").attr({'src' : pic});
			$("#preview1_img").attr({'src' : pic});

			$('#uppic_flash').show();
			
			var ias = $('#thumbnail').imgAreaSelect({
				aspectRatio : '1:1', //长宽1:1的比例，在等待剪裁的图像上呈现出正方形的选择框
				onSelectChange : lis, //把用户当前的选择状态传给lis函数
				onInit : function() {
					var _opt = ias.getOptions();
					render($('#preview1_img'), $("#thumbnail")[0], {
						height : _opt.y2 - _opt.y1,
						width : _opt.x2 - _opt.x1,
						x1 : _opt.x1,
						x2 : _opt.x2,
						y1 : _opt.y1,
						y2 : _opt.y2
					}, size1);
				},
				instance : true,
				keys : true,
				x1 : 50, //选择框在图片里的初始位置，这里默认是图片左上角，宽度和高度都是200px，符合size1
				y1 : 50,
				x2 : size1.width,
				y2 : size1.height
			});
		}
		
		function lis(img, sel) {
			render($('#preview1 img'), img, sel, size1);

		}
		function render(target, img, sel, size) {
			var scale = size.width / sel.width;
			target.css({
				width : Math.round(scale * $(img).width()),
				height : Math.round(scale * $(img).height())
			});
			target.css({
				marginLeft : '-' + Math.round(scale * sel.x1) + 'px',
				marginTop : '-' + Math.round(scale * sel.y1) + 'px'
			});
			target.data('scale', scale);
			target.data('width', sel.width);
			target.data('height', sel.height);
			target.data('x', sel.x1);
			target.data('y', sel.y1);
		}
		
		//ajax提交表单
		$(function() {
			$('#form1').submit(function(e) {
				e.preventDefault();
				e.stopPropagation();

				var preview1 = $('#preview1 img');
 
				loadlayer();
				$.post("index.php?c=uppic&act=savethumb", {
					sizeit : true,
					count : 1,
					width : preview1.data('width'),
					height : preview1.data('height'),
					x : preview1.data('x'),
					y : preview1.data('y'),
					img1 : $('#preview1_img').attr('src'),
					scale : preview1.data('scale'),
				}, function(res) {
					
					layer.closeAll('loading');
					
					if (res) {
						var res = eval('(' + res + ')');
						layer.msg(res.msg, 2, res.st, function() {
							location.reload();
						});
					}
				});
			});
		});
	</script>
	 
	<!--内容结束-->
	{yun:}include file="$lietoustyle/footer.htm"{/yun}